<template>
<div>
  <router-link class="listLeft" :to="`/ShoppingCart?id=${item.prod_id}`" v-if="src" v-for="(item, index) in src" :key="index">
    <ul class="box_shadow"  >
      <li>
        <img :src='item.prod_pic'/>
      </li>
      <li><h3 style="color: #749594;font-size: 16px;height: 22px ">{{item.prod_title}}</h3></li>
      <li><p>{{item.prod_desc}}</p></li>
      <li><span style="color: #FF6700; font-size: 15px">{{item.prod_price_current}} &nbsp;元起</span></li>
    </ul>
  </router-link>
  </div>
</template>

<script>
export default {
  name: "listModuleLeft",
  props:['src'],
  data(){
    return {
    }
  },
}
</script>

<style scoped>
.listLeft {
  display: block;
  float: left;
  width: 224px;
  height: 300px;
  /*background-color: rgba(0,0,0,0);*/
  margin-left:14px ;
  margin-bottom: 15px;

}
ul {
  margin-left: -10px;
}

a ul li img{
  width: 160px;
  height: 160px;
}
a ul li {
  list-style: none;
}
p, h3 {
  width: 160px;
  text-align: center;
}
span {
  display: block;
  width: 160px;
  text-align: center;
}
div {
  float: left;
  width: 988px;
}

.listLeft .box_shadow {
  transition: all 0.1s;
}

.listLeft .box_shadow:hover {

  box-shadow:  0px 0px 25px #a09999;
  border: 2px solid #b0b0b0;
  color: #c1bbbb;
  border-radius: 2px;
}
</style>